<template>
  <div class="login">
    <div class="login-layout">
      <!-- 左側背景圖片區域 -->
      <div class="left-background">
        <div class="background-image"></div>
      </div>

      <!-- 右側登錄區域 -->
      <div class="right-login-area">
        <div class="back-button" @click="goHome">
          <span class="iconfont icon-arrow-left-bold"></span>
        </div>
        <div class="loginBg">
          <div class="wrapper" v-show="current === 1">
            <div class="title">
              快速登錄/註冊
              <!--@click="current = 3"-->
              <span @click="ewmLogin" v-if="appidNum" class="iconfont icon-weixindenglu1"></span>
              <!-- <a :href="`https://open.weixin.qq.com/connect/qrconnect?appid=${appidNum}&redirect_uri=${hosts}&response_type=code&scope=snsapi_login&state=EqMkUDWh8F3euWlt23jHJ8ZJuaTAVPZyiKEoq5U0`" v-if="appidNum" class="iconfont icon-weixindenglu1"></a> -->
            </div>
            <div class="item phone acea-row row-middle">
              <div class="number">+86</div>
              <input type="text" placeholder="請輸入用戶名" v-model="account" />
            </div>
            <div class="item verificat acea-row row-between-wrapper">
              <input type="text" placeholder="請輸入验证碼" v-model="captcha" />
              <button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="getVerify">
                {{ text }}
              </button>
            </div>
            <div class="isAgree">
              <el-checkbox v-model="agreement"></el-checkbox><span class="agree">我已閱讀並同意<span class="agreement"
                  @click="agreementTap(4)">《用戶協議》</span>和<span class="agreement"
                  @click="agreementTap(3)">《隱私協議》</span></span>
            </div>
            <div class="signIn bg-color" @click="loginMobile">登錄/註冊</div>
            <div class="fastLogin font-color" @click="current = 2">賬号登錄</div>
          </div>
          <div class="wrapper" v-show="current === 2">
            <div class="title">
              賬号登錄
              <!--@click="current = 3"-->
              <span @click="ewmLogin" v-if="appidNum" class="iconfont icon-weixindenglu1"></span>
              <!-- <a :href="`https://open.weixin.qq.com/connect/qrconnect?appid=${appidNum}&redirect_uri=${hosts}&response_type=code&scope=snsapi_login&state=EqMkUDWh8F3euWlt23jHJ8ZJuaTAVPZyiKEoq5U0`" v-if="appidNum" class="iconfont icon-weixindenglu1"></a> -->
            </div>
            <div class="item phone acea-row row-middle">
              <div class="number">+86</div>
              <input type="text" placeholder="請輸入用戶名" maxlength="11" v-model="account" />
            </div>
            <div class="item pwd">
              <input type="password" placeholder="請輸入密碼" v-model="password" />
            </div>
            <div class="isAgree">
              <el-checkbox v-model="agreement"></el-checkbox><span class="agree">我已閱讀並同意<span class="agreement"
                  @click="agreementTap(4)">《用戶協議》</span>和<span class="agreement"
                  @click="agreementTap(3)">《隱私協議》</span></span>
            </div>
            <div class="signIn bg-color" @click="loginH5">登錄</div>
            <div class="fastLogin font-color" @click="current = 1">
              快速登錄/註冊
            </div>
          </div>
          <!--<div class="wxLogin" v-if="current === 3">-->
          <!--<div class="title">掃碼登錄<div class="iconfont icon-zhanghaodenglu1" @click="current = 1"></div></div>-->
          <!--<div class="wxCode">-->
          <!--<div class="acea-row row-between-wrapper">-->
          <!--<span class="iconfont icon-erweimabianjiao"></span>-->
          <!--<span class="iconfont icon-erweimabianjiao right"></span>-->
          <!--</div>-->
          <!--<div class="pictrue">-->
          <!--<img src="../assets/images/loginBg.jpg">-->
          <!--</div>-->
          <!--<div class="acea-row row-between-wrapper">-->
          <!--<span class="iconfont icon-erweimabianjiao bottomL"></span>-->
          <!--<span class="iconfont icon-erweimabianjiao right bottomR"></span>-->
          <!--</div>-->
          <!--</div>-->
          <!--<div class="tip">请使用微信掃壹掃登錄</div>-->
          <!--</div>-->
        </div>
      </div>
    </div>

    <!-- <div class="footer">
      <div>
        <span>聯系電話：{{ info.contact_number }}</span>
        <span class="adress">地址：{{ info.company_address }}</span>
      </div>
      <div class="record">
        {{ info.copyright }}<a href="https://beian.miit.gov.cn/" target="_blank" class="num">{{ info.record_No }}</a>
      </div>
    </div> -->
    <el-dialog class="detail-bd" :title="agreementTitle" :visible.sync="userAgreement" :show-close="false" width="900px"
      center>
      <div class="userAgree" v-html="agreementCon"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="agreementClose">確 定</el-button>
      </span>
    </el-dialog>
    <Verify v-if="verifyModal" @success="success" captchaType="blockPuzzle"
      :imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
  </div>
</template>

<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import Verify from "@/components/verifition/Verify";

export default {
  name: "login",
  auth: false,
  mixins: [sendVerifyCode],
  components: { Verify },
  data() {
    return {
      verifyModal: false,
      current: 1,
      account: "",
      password: "",
      captcha: "",
      keyCode: "",
      info: "",
      isShow: true,
      appidNum: "",
      hosts: "",
      codes: "",
      fromPath: "",
      agreement: false,
      userAgreement: false,
      agreementCon1: "",
      agreementCon2: "",
      agreementCon: "",
      agreementTitle: ""
    };
  },
  async asyncData({ $axios, query }) {
    const keyCode = await $axios.$get("/verify_code");
    const companyInfo = await $axios.$get("/pc/get_company_info");
    const appidNum = await $axios.$get("/pc/get_appid");
    const agreement1 = await $axios.$get("/get_agreement/4");
    const agreement2 = await $axios.$get("/get_agreement/3");
    return {
      keyCode: keyCode.key,
      info: companyInfo,
      appidNum: appidNum.appid,
      codes: query.code || "",
      agreementCon1: agreement1.content,
      agreementCon2: agreement2.content
    };
  },
  fetch({ store }) {
    store.commit("isHeader", false);
    store.commit("isFooter", false);
  },
  head() {
    return {
      title: this.$store.state.titleCon
    };
  },
  created() {
    if (this.$auth.loggedIn) {
      this.$router.push("/");
    }
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
    this.hosts = location.origin + location.pathname;
    this.fromPath = this.$cookies.get("fromPath");
    if (this.codes) {
      this.loginCode();
    }
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    keyDown(e) {
      // 只在登录页面的输入框获得焦点时才处理回车键
      const activeElement = document.activeElement;
      const isLoginInput = activeElement && (
        activeElement.closest('.login') ||
        activeElement.type === 'text' ||
        activeElement.type === 'password'
      ) && this.$route.name === 'login';

      if (e.keyCode === 13 && isLoginInput) {
        if (this.current === 1) {
          this.loginMobile();
        } else if (this.current === 2) {
          this.loginH5();
        }
      }
    },
    ewmLogin() {
      if (!this.agreement) return this.$message.error("请確认阅读用戶協議");
      window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${this.appidNum}&redirect_uri=${this.hosts}&response_type=code&scope=snsapi_login&state=EqMkUDWh8F3euWlt23jHJ8ZJuaTAVPZyiKEoq5U0`;
    },
    agreementTap(type) {
      if (type == 4) {
        this.agreementTitle = "用戶協議";
        this.agreementCon = this.agreementCon1;
      } else {
        this.agreementTitle = "隱私協議";
        this.agreementCon = this.agreementCon2;
      }
      this.userAgreement = true;
    },
    agreementClose() {
      this.userAgreement = false;
      this.agreement = true;
    },
    goHome() {
      this.$router.push({ path: "/" });
    },
    async loginCode() {
      let that = this;
      await that.$auth
        .loginWith("local3", { params: { code: this.codes } })
        .then(() => {
          that.isShow = false;
          if (this.fromPath) {
            let path = this.fromPath.split(that.$router.history.base);
            let fromPath = path.join("");
            that.$router.push(fromPath);
          } else {
            that.$router.push("/");
          }
          that.$cookies.remove("fromPath");
        })
        .catch(err => {
          // that.$layer.msg('登錄失败');
        });
    },
    async loginH5() {
      let that = this;
      if (!that.agreement) return that.$message.error("请確认阅读用戶協議");
      if (!that.account) return that.$message.error("请填写手機號碼");
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
        return that.$message.error("請輸入正確的手機號碼");
      if (!that.password) return that.$message.error("请填写密碼");
      let userInfo = {
        account: that.account,
        password: that.password
      };
      await that.$auth
        .loginWith("local1", { data: userInfo })
        .then(() => {
          that.isShow = false;
          if (this.fromPath) {
            let path = this.fromPath.split(that.$router.history.base);
            let fromPath = path.join("");
            that.$router.push(fromPath);
          } else {
            that.$router.push("/");
          }
          that.$cookies.remove("fromPath");
        })
        .catch(err => {
          that.$message.error(err);
        });
    },
    getVerify() {
      if (!this.account) return this.$message.error("请填写手機號碼");
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.account))
        return this.$message.error("請輸入正確的手機號碼");
      if (!this.agreement) return this.$message.error("请確认阅读用戶協議");
      this.verifyModal = true;
      this.$nextTick(e => {
        this.$refs.verify.show();
      });
    },
    success(params) {
      this.closeModel(params);
    },
    // 关闭模态框
    closeModel(params) {
      this.code(params);
    },
    async loginMobile() {
      let that = this;
      if (!that.agreement) return that.$message.error("请確认阅读用戶協議");
      if (!that.account) return that.$message.error("请填写手機號碼");
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
        return that.$message.error("請輸入正確的手機號碼");
      if (!that.captcha) return that.$message.error("请填写验证碼");
      if (!/^[\w\d]+$/i.test(that.captcha))
        return that.$message.error("請輸入正確的验证碼");
      let userInfo = {
        phone: that.account,
        captcha: that.captcha
      };
      await that.$auth
        .loginWith("local2", { data: userInfo })
        .then(() => {
          that.isShow = false;
          if (this.fromPath) {
            let path = this.fromPath.split(that.$router.history.base);
            let fromPath = path.join("");
            that.$router.push(fromPath);
          } else {
            that.$router.push("/");
          }
          that.$cookies.remove("fromPath");
        })
        .catch(err => {
          that.$message.error("验证碼错误");
        });
    },
    async code(data) {
      let that = this;
      if (!that.agreement) return that.$message.error("请確认阅读用戶協議");
      if (!that.account) return that.$message.error("请填写手機號碼");
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
        return that.$message.error("請輸入正確的手機號碼");
      await this.$axios
        .post("/register/verify", {
          phone: that.account,
          type: "mobile",
          key: that.keyCode,
          captchaType: "blockPuzzle",
          captchaVerification: data.captchaVerification
        })
        .then(res => {
          that.$message.success(res.msg);
          that.sendCode();
        })
        .catch(err => {
          that.$message.error(err);
        });
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  // 左右佈局容器
  .login-layout {
    display: flex;
    height: 100%;
    width: 100%;

    // 左側背景圖片區域
    .left-background {
      flex: 1;
      position: relative;

      .background-image {
        width: 100%;
        height: 100%;
        background: url(../assets/images/login.webp) no-repeat center center;
        background-size: cover;
      }
    }

    // 右側登錄區域
    .right-login-area {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, $ivory 0%, $light-gray 100%);
      padding: 20px;
      box-sizing: border-box;
      position: relative;

      .back-button {
        position: absolute;
        top: 20px;
        left: 30px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $slate;
        cursor: pointer;
        z-index: 1000;
        transition: all 0.3s ease;

        .iconfont {
          font-size: 22px;
          font-weight: 500;
        }

        &:hover {
          color: $dark-gold;
          transform: translateY(-2px);
        }
      }


    }
  }
}




.header {
  height: 110px;

  .icon {
    cursor: pointer;
    width: 112px;
    height: 40px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name {
    font-size: 28px;
    margin-left: 15px;
    cursor: pointer;
  }

  .item {
    margin-left: 40px;
    font-size: 16px;
    color: $light-gray;

    .iconfont {
      margin-right: 6px;
      font-size: 20px;
    }
  }
}

.loginBg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .wxLogin {
    width: 450px;
    height: 427px;
    background: $pure-white;
    position: absolute;
    right: 360px;
    top: 91px;
    padding-top: 34px;

    .title {
      font-weight: 600;
      font-size: 28px;
      padding-left: 30px;
      position: relative;
      color: $obsidian;
      letter-spacing: 0.5px;

      .iconfont {
        font-size: 60px;
        position: absolute;
        right: 0;
        top: -35px;
      }
    }

    .wxCode {
      width: 220px;
      margin: 38px auto 0 auto;

      .iconfont {
        font-size: 30px;
        color: $disabled;

        &.right {
          transform: rotateY(180deg);
        }

        &.bottomL {
          transform: rotateX(180deg);
        }

        &.bottomR {
          transform: rotateX(180deg);
        }
      }

      .pictrue {
        width: 190px;
        height: 190px;
        margin: -15px auto;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .tip {
      color: $light-gray;
      font-size: 16px;
      margin-top: 20px;
      text-align: center;
    }
  }

  .wrapper {
    width: 90%;
    height: auto;
    min-height: 427px;
    background-color: $pure-white;
    position: relative;
    text-align: center;
    padding: 40px 30px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    }

    .title {
      font-size: 28px;
      font-weight: 600;
      position: relative;
      color: $obsidian;
      letter-spacing: 0.5px;

      .iconfont {
        position: absolute;
        top: -71px;
        right: 0;
        font-size: 60px;
        cursor: pointer;
      }
    }

    .item {
      width: 320px;
      height: 50px;
      border: 1.5px solid $ivory;
      border-radius: 12px;
      margin: 0 auto;
      background: $ivory;
      transition: all 0.3s ease;
      overflow: hidden;

      &:hover {
        border-color: $light-gray;
        background: $pure-white;
      }

      &:focus-within {
        border-color: $dark-gold;
        background: $pure-white;
        box-shadow: 0 0 0 3px rgba($dark-gold, 0.1);
      }

      &.phone {
        margin-top: 34px;
        display: flex;
        align-items: center;

        .number {
          width: 65px;
          height: 100%;
          line-height: 50px;
          color: $light-gray;
          border-right: 1px solid $ivory;
          background: rgba(0, 0, 0, 0.02);
          flex-shrink: 0;
        }

        input {
          flex: 1;
          width: auto;
        }
      }

      &.pwd {
        margin-top: 20px;

        input {
          width: 100%;
        }
      }

      &.verificat {
        margin-top: 20px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        input {
          width: 240px;
        }

        .code {
          width: 80px;
          height: 100%;
          border: 0;
          background: $dark-gold;
          color: $pure-white;
          border-left: 1px solid $ivory;
          border-radius: 0 10px 10px 0;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          cursor: pointer;
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 0.5px;
          box-shadow: 0 2px 8px rgba($dark-gold, 0.3);
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s;
          }

          &:hover {
            background: $dark-gold;
            box-shadow: 0 4px 16px rgba($dark-gold, 0.4);

            &::before {
              left: 100%;
            }
          }

          &:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba($dark-gold, 0.3);
          }

          &.on {
            background: linear-gradient(135deg, $disabled 0%, $light-gray 100%);
            color: $light-gray;
            cursor: not-allowed;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            transform: none;

            &:hover {
              background: linear-gradient(135deg, $disabled 0%, $light-gray 100%);
              transform: none;
              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

              &::before {
                left: -100%;
              }
            }
          }
        }
      }

      input {
        padding: 0 16px;
        height: 100%;
        border: 0;
        outline: none;
        background: transparent;
        font-size: 15px;
        color: $charcoal;
        box-sizing: border-box;

        &::placeholder {
          color: $light-gray;
        }

        &:focus {
          outline: none;
        }
      }
    }

    .signIn {
      width: 320px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      margin: 24px auto 0 auto;
      color: $pure-white;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      border-radius: 12px;
      background-color: $dark-gold;
      border: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba($dark-gold, 0.3);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba($dark-gold, 0.4);

        &::before {
          left: 100%;
        }
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba($dark-gold, 0.3);
      }
    }

    .fastLogin {
      margin-top: 14px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: $dark-gold;
      transition: all 0.3s ease;
      text-decoration: none;

      &:hover {
        color: $dark-gold;
        text-decoration: underline;
      }
    }
  }
}

.isAgree {
  width: 358px;
  margin: 12px auto 0 auto;
  text-align: left;
  display: flex;
  align-items: center;
  line-height: 1.5;

  ::v-deep .el-checkbox {
    .el-checkbox__inner {
      border-color: $dark-gold;

      &:hover {
        border-color: $dark-gold;
      }

      &.is-checked {
        background-color: $dark-gold ;
        border-color: $dark-gold ;
      }
    }

    &.is-checked .el-checkbox__inner {
      background-color: $dark-gold ;
      border-color: $dark-gold ;
    }
  }

  .agree {
    margin-left: 8px;
    color: $light-gray;
    cursor: pointer;
    font-size: 13px;

    .agreement {
      color: $dark-gold;
      font-weight: 500;
      transition: color 0.3s ease;

      &:hover {
        color: $gold-accent;
        text-decoration: underline;
      }
    }
  }
}
</style>
